export const DSMap = (
  context,
  initOptions = {
    mapType: 'BAMP_NORMAL_MAP',
    minZoom: 5,
    maxZoom: 50,
    enableIconClick: true,
    enableRotate: false,
    enableTilt: true
  },
  mapOptions = {
    center: {
      lng: 113.58255478654918,
      lat: 22.27656465424921
    },
    zoom: 18,
    heading: 64.5,
    tilt: 50,
    enableScrollWheelZoom: true,
    mapStyleId: '55d8065eab4e9692936c3fb97b339593'
  }
) => {
  const BMapGL = window.BMapGL

  const map = new BMapGL.Map(context, initOptions) // 地图实例
  map.centerAndZoom(mapOptions.center || new BMapGL.Point(116.404, 39.915), mapOptions.zoom || 18)
  map.enableScrollWheelZoom(mapOptions.enableScrollWheelZoom)
  map.setHeading(mapOptions.heading || 64.5)
  map.setTilt(mapOptions.tilt || 50)
  if (mapOptions.mapStyleId) {
    map.setMapStyleV2({
      styleId: mapOptions.mapStyleId
    })
  }

  function DSInfowindow(location) {
    const { address, addressComponents, content, surroundingPois } = location

    const info = {
      address: {
        allName: content.address || address, // 具体到区
        nameCompose: {
          province: addressComponents.province,
          city: addressComponents.city,
          district: addressComponents.district,
          street: addressComponents.street,
          streetNumber: addressComponents.streetNumber
        }, // 具体到街道
        details: {
          province: content.address_detail.province,
          city: content.address_detail.city,
          district: content.address_detail.district,
          street: content.address_detail.street,
          streetNumber: content.address_detail.street_number,
          town: content.address_detail.town
        }, // 具体到塔楼
        desc: content.poi_desc // 当前点击具体位置
      },
      content: content.poi_region.map((item) => {
        return {
          name: item.name,
          tag: item.tag.split(';')
        }
      }),
      surrounding: surroundingPois.map((item) => {
        return {
          title: item.title,
          address: item.address,
          tags: item.tags
        }
      })
    }

    const createHtml = ({ address, content, surrounding }) => {
      const colorList = [
        '19CAAD',
        '8CC7B5',
        'A0EEE1',
        'BEE7E9',
        'BEEDC7',
        'D6D5B7',
        'D1BA74',
        'E6CEAC',
        'ECAD9E',
        'F4606C'
      ]

      let nameHeader = ''
      content
        .map((item) => {
          let tags = ''
          item.tag
            .map((e) => {
              return `<p
          style="
            border-radius: 6px;
            padding: 1px 2px;
            margin: 1px 2px;
            line-height: 75%;
            background-color: #${colorList[Math.floor(Math.random() * colorList.length)]};
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          "
        >${e}</p>`
            })
            .forEach((context) => {
              tags += context
            })
          return `
        <b style="margin-right: auto">${item.name}</b>
        <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 8px;
        "
      >
      ${tags}
      </div>
        `
        })
        .forEach((h) => {
          nameHeader += h
        })
      let header = `<div style="display: flex; flex-direction: row">
                      ${nameHeader}
                    </div>`
      let address_1 = ''
      let address_2 = ''
      for (let key in address.nameCompose) {
        address_1 += address.nameCompose[key]
      }
      for (let key in address.details) {
        address_2 += address.details[key]
      }

      let surrounding_ = ''
      let surroundingList = surrounding.map((e) => {
        let tags = ''
        let list = e.tags.map((t) => {
          return `<p
          style="
            border-radius: 6px;
            padding: 1px 2px;
            margin: 1px 2px;
            line-height: 75%;
            background-color: #${colorList[Math.floor(Math.random() * colorList.length)]};
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          "
        >${t}</p>`
        })
        for (let index = 0; index < list.length; index++) {
          if (index < 2) tags += list[index]
        }
        return `<div style="display: flex; flex-direction: row;">
          <b style="margin-right: auto; font-size: 10px;line-height: 80%;margin-bottom: 5px">${e.title}</b>
        <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 8px;
          line-height: 80%;
          margin-bottom: 5px
        "
      >${tags}</div>
          </div>
          
        `
      })

      for (let index = 0; index < surroundingList.length; index++) {
        if (index < 4) surrounding_ += surroundingList[index]
      }

      let context = `<div style="display: flex; flex-direction: column;width:100%">
      <p style="font-size: 10px; margin-left: 0px;margin-bottom:8px;line-height: 70%;color: #aeaeae;">${address_1}</p>
      <p style="font-size: 10px; margin-left: 0px;margin-bottom:14px;line-height: 70%;color: #aeaeae;">${address_2}</p>
      <p style="font-size: 13px; margin-left: 0px;margin-bottom:17px;line-height: 120%;color: #666666;">当前位置：${address.desc}</p>
      <p style="font-size: 12px;line-height: 90%;margin-bottom: 10px;font-weight: 500">附近：</p>
      <div style="font-size: 13px; margin-left: 0px;margin-bottom:5px;color: #666666;">${surrounding_}</div>
      </div>`
      let container = `<div 
                          style="
                            margin: 0;
                            padding: 0;
                            border-radius: 8px;
                            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
                            background-color: #ffffff;
                            padding-bottom: 20px;
                            "
                      >
                        ${header}
                        ${context}
                      </div>`
      return container
    }

    return createHtml(info)
  }

  function init() {
    const geoc = new BMapGL.Geocoder({})
    geoc.getLocation(map.getCenter(), (res) => {
      info.initInfo = res
    })
    // 缩放级别显示3d建筑时视角斜拉
    map.addEventListener('zoomend', () => {
      if (map.getZoom() > 19) {
        map.setHeading(mapOptions.heading || 64.5)
        map.setTilt(mapOptions.tilt || 73)
      }
    })

    // 添加点击事件
    map.addEventListener('click', (e) => {
      const item = map.getIconByClickPosition(e)
      if (!item) return
      geoc.getLocation(e.latlng, (rs) => {
        const infoWindow = new BMapGL.InfoWindow(DSInfowindow(rs))
        map.openInfoWindow(infoWindow, e.latlng)
        info.clickInfo = rs
        map.panTo(e.latlng)
        map.setHeading(mapOptions.heading || 64.5)
        map.setTilt(mapOptions.tilt || 50)
      })
    })
  }

  // 地理信息
  const info = {
    initInfo: '',
    clickInfo: ''
  }

  init()

  return {
    BMapGL,
    map,
    info,
    mapOptions
  }
}
